<template>
	<view class="payment-page">
		<view class="tip" v-if="list.merchant.length>1">
			该订单为合并支付订单，订单内商品需一起支付
		</view>
		<uv-gap height="10" bgColor="transparent" v-else/>
		<!-- 收货地址 -->
		<view class="address-section">
			<uv-icon name="map" size="20" color="#ff0000"></uv-icon>
			<view class="address-info">
				<view class="name">{{list.address.address}}</view>
				<view class="phone">{{list.address.address_name}} {{list.address.address_tel}}</view>
			</view>
			<uv-icon name="arrow-right" size="16"></uv-icon>
		</view>
		<view v-for="(e,i) in list.merchant" :key="i">
			<uv-gap height="10" bgColor="transparent" />
			<view class="item">
				<view class="top">
					<image :src="e.brand_logo" class="logo"/>
					<text class="brand_name">{{e.merchant_name}}</text>
					<uv-icon name="arrow-right" color="#999" size="12"/>
				</view>

				<uv-line color="#EEEEEE" />

				<view class="flex padding2" v-for="(a, j) in e.order_info" :key="a.id">
					<image :src="a.product_image" class="thumb"/>
					<view class="flex-1 flex align-start justify-between">
						<view class="skus">
							<text class="pName">{{a.product_name}}</text>
							<uv-gap height="5" bgColor="transparent" v-if="a.spec_values"/>
							<view class="tags" v-if="a.spec_values">{{a.spec_values}}</view>
						</view>
						<view class="jiage">
							<view class="t1">￥{{a.price}}</view>
							<view class="t2">x{{a.cart_num}}</view>
						</view>
					</view>
				</view>
				<uv-line color="#EEEEEE" />
				<view class="order-state">
					<text class="state" v-if="e.merchant_coupon_price>0">使用{{e.merchant_coupon_price}}元店铺优惠券</text>
					<text class="state">小计:￥{{e.total_price}}{{e.freight?'('+e.freight+')':''}}</text>
				</view>
				<uv-gap height="10" bgColor="transparent" />
			</view>
		</view>
		<uv-gap height="10" bgColor="transparent" />
		<view class="bgcf padding1">
			<view class="order-info">
				<view class="lbl_info">商品总额</view>
				<view class="content_info">￥{{list.total_price}}</view>
			</view>
			<view class="order-info" v-if="list.total_merchant_coupon_price>0">
				<view class="lbl_info">店铺优惠</view>
				<view class="content_info">-￥{{list.total_merchant_coupon_price}}</view>
			</view>
			<view class="order-info" v-if="list.total_platform_coupon_price>0">
				<view class="lbl_info">平台优惠</view>
				<view class="content_info">-￥{{list.total_platform_coupon_price}}</view>
			</view>
			<view class="order-info" v-if="list.total_freight_price>0">
				<view class="lbl_info">总运费</view>
				<view class="content_info">￥{{list.total_freight_price}}</view>
			</view>
			<view class="order-info">
				<view class="hj_info">合计应付:</view>
				<view class="content_info"><text
						class="hj_price">￥{{list.actual_payment_price}}</text>{{list.total_freight_price==0?'(免运费)':''}}</view>
			</view>
		</view>
		<!-- 备注 -->
		<view class="remark-section">
			<uv-textarea v-model="remark" placeholder="请输入备注" :maxlength="255" />
		</view>

		<!-- 底部结算栏 -->
		<view class="footer-bar">
			<view class="pay-price">应付:<text class="total-price">￥{{list.actual_payment_price}}</text></view>
			<uv-button text="去支付" color="rgb(255 0 18)" shape="circle" style="width: 50%;"
				@click="submitOrder"></uv-button>
		</view>
		<uv-popup ref="popTimeRef" mode="bottom" round="10">
			<visitTime :uptick="uptick" @btnClick="selectTime"></visitTime>
		</uv-popup>
		<uv-popup ref="popupRef" mode="bottom" round="10">
			<view class="popup-content">
				<view class="flex align-end justify-center">
					<text class="price1">¥{{list.actual_payment_price}}</text>
				</view>
				<uv-gap height="20" bgColor="transparent" />
				<uv-cell-group :border="false">
					<uv-cell v-for="(item, index) in payList" :key="index" :icon="item.piclink" :title="item.pay_name"
						@click="getPayType(index)" :border="false" titleStyle="font-size:28upx">
						<template #value>
							<uv-icon name="checkmark-circle-fill" color="#C52923" size="20"
								v-if="payType == item.type" />
							<uv-icon name="checkmark-circle" color="#B1B1B1" size="20" v-else />
						</template>
					</uv-cell>
				</uv-cell-group>
				<uv-gap height="20" bgColor="transparent" />
				<view class="but">
					<uv-button text="确认付款" color="#C52923" shape="circle" @click="closePopup" />
				</view>
			</view>
		</uv-popup>
		<uv-popup ref="popPwdRef" mode="center" round="10" closeable>
			<view class="popup-content pwd_pop">
				<text class="lbl_pwd">输入密码</text>
				<uv-gap height="20" bgColor="transparent" />
				<view class="flex align-center justify-center padding2">
					<uv-input placeholder="请输入支付密码" type="password" v-model="payPwd" />
				</view>
				<uv-gap height="20" bgColor="transparent" />
				<view class="but">
					<uv-button text="确认支付" color="#C52923" shape="circle" @click="doPay" />
				</view>
			</view>
		</uv-popup>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
		computed,
		onBeforeUnmount
	} from 'vue'
	import dayjs from 'dayjs'
	import {
		getIconPath
	} from '@/util'
	import {
		getPendingPaymentDetail,
		getPaymentMethod,
		payOrder
	} from '@/api'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	// 使用 ref 创建响应式数据
	const order_id = ref(0)
	const list = ref({
		"merchant": []
	});
	const selectAddress = () => {
		uni.navigateTo({
			url: '/pages-user/address?selAddress=1',
			events: {
				// 定义接收事件
				acceptAddress: async (data) => {
					address.value.id = data.id;
					address.value.name = data.name;
					address.value.tel = data.tel;
					address.value.province = data.province;
					address.value.city = data.city;
					address.value.area = data.area;
					address.value.address = data.address;
				}
			},
			success: (res) => {
				// 可选：打印事件通道
				console.log(res.eventChannel)
			}
		})
	};
	// 打开选择器方法
	const openPicker = () => {
		popTimeRef.value.open()
	};
	const payList = ref([])
	const payType = ref('')
	const payPwd = ref('')
	const is_third_party_payment = ref(0)
	const popupRef = ref(null)
	const popPwdRef = ref(null)
	const orderid = ref(0)
	const submitOrder = async () => {
		if (payList.value.length == 0) {
			await getPayList()
		}
		popupRef.value.open()
	};
	const closePopup = async () => {
		popupRef.value.close()
		if (payType.value) {
			let sid = list.value.merchant.map(merchant => merchant.sid)
			let params = {
				order_id: order_id.value,
				sid: sid,
				pay_type: payType.value
			}
			if (is_third_party_payment.value == 0) {
				popPwdRef.value.open()
			} else {
				let result = await payOrder(params)
				if (result.code == 200) {
					uni.navigateTo({
						url: '/pages-home/market/pay_result?id=' + order_id.value + '&sid='+ sid.join(','),
					})
				} else {
					uni.navigateTo({
						url: '/pages-home/market/pay_result?id=' + order_id.value + '&sid='+ sid.join(',') + '&err=' + result.msg,
					})
				}
			}
		} else {
			uni.showToast({
				title: '请选择支付方式',
				icon: 'none'
			})
		}

	}

	const doPay = async () => {
		if (!payPwd.value) return uni.$uv.toast('请输入支付密码')
		popPwdRef.value.close()
		let sid = list.value.merchant.map(merchant => merchant.sid)
		let params = {
			order_id: order_id.value,
			sid: sid,
			pay_type: payType.value,
			password: payPwd.value
		}
		alert(JSON.stringify(params))
		let result = await payOrder(params)
		if (result.code == 200) {
			uni.navigateTo({
				url: '/pages-home/market/pay_result?id=' + order_id.value + '&sid='+ sid.join(','),
			})
		} else {
			uni.navigateTo({
				url: '/pages-home/market/pay_result?id=' + order_id.value + '&sid='+ sid.join(',') + '&err=' + result.msg,
			})
		}
	}
	onLoad(async (options) => {
		order_id.value = parseInt(options.order_id)
		list.value = (await getPendingPaymentDetail({order_id: options.order_id,merchant_order_id:options.merchant_order_id})).result
	})

	const getPayList = async () => {
		const {
			result
		} = await getPaymentMethod()
		payList.value = result
	}
	const getPayType = (index) => {
		payType.value = payList.value[index].type
		is_third_party_payment.value = payList.value[index].is_third_party_payment
	}
</script>

<style lang="scss" scoped>
	.tip {
		background:#ffffcc;
		padding: 5px 20px;
		font-size: 14px;
		color:#333;
	}
	.popup-content {
		padding: 30upx 0;
	
		.but {
			margin: 0 30upx;
		}
		.lbl_pwd {
			font-size: 30upx;
			color: #333;
			text-align: center;
			font-weight: bold;
		}
	}
	
	.pwd_pop{
		width: 600upx;
		text-align: center;
	}

	.padding1 {
		padding: 10upx 30upx;
	}

	.padding2 {
		padding: 0 30upx;
	}

	.payment-page {
		background-color: #f7f7f7;
		min-height: 100vh;
		padding-bottom: 80px;
	}

	.bgcf {
		background-color: #fff;
	}

	.item {
		width: 100%;
		background-color: #fff;

		.top {
			display: flex;
			padding: 16upx 30upx;
			align-items: center;
			justify-content: space-between;
			.logo {
				width: 40upx;
				height: 40upx;
				border-radius: 6upx;
				margin-right: 10upx;
			}
			.brand_name {
				color: #333;
				font-size: 28upx;
				margin-right: 10upx;
			}
		}
	}
	
	.mtr10 {
		margin-top: 10upx;
		margin-right: 20upx;
		margin-bottom: 10upx;
	}

	.margin20 {
		margin: 20upx 20upx 20upx 44upx;
	}

	.mt10 {
		margin-top: 10upx;
	}

	.t1 {
		color: #333;
		font-size: 30upx;
		text-align: right;
	}

	.t2 {
		color: #979797;
		font-size: 24upx;
		text-align: right;
	}
	
	.thumb {
		width: 120upx;
		height: 120upx;
		border-radius: 6upx;
		margin-right: 20upx;
		margin-bottom: 20upx;
	}
	
	.skus {
		.pName {
			font-size: 26upx;
			color: #333;
		}
		.tags {
			background:#F2F2F2;
			color: #333;
			display: inline-flex;
			border-radius: 6upx;
			font-size: 24upx;
			padding: 4upx 15upx;
		}
	}

	.jiage {
		margin-left: 20upx;
		margin-top: 20upx;

		.btn {
			margin-top: 5px;
			color: #333;
			font-size: 12px;
			text-align: center;
			border: 1upx solid #f2f2f2;
			padding: 8upx;
			border-radius: 5upx;
			width: 56px;
		}
	}

	.tags {
		display: inline-flex;
	}
	.order-state {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin:10px 15px 0 15px;
		
		.state {
			font-size:24upx;
			color: #979797;
		}
		.state:only-child{
			margin-left: auto;
		}
	}

	.order-info {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin:10px;
		
		.lbl_info {
			width: 80px;
			font-size: 24upx;
			color: #979797;
		}

		.hj_info {
			width: 100px;
			font-size: 28upx;
			color: #666;
		}

		.hj_price {
			font-size: 28upx;
			color: #ff3333;
		}

		.content_info {
			flex: 1;
			text-align: right;
			font-size: 24upx;
			color: #979797;
		}
	}

	.address-section {
		display: flex;
		align-items: center;
		padding: 15px;
		background-color: #fff;

		.address-info {
			flex: 1;
			margin-left: 10px;

			.name {
				font-weight: bold;
				margin-bottom: 2px;
			}

			.phone {
				font-size: 12px;
				color: #666;
			}
		}
	}

	.time-selector {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 12px 16px;
		background-color: #f7f7f7;
		border-radius: 8px;
	}

	.remark-section {
		margin: 10px;
		background-color: #fff;
		border-radius: 8px;
	}
	
	.price1 {
		font-size:40upx;
		color:#333;
	}

	.footer-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 50px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 15px;
		background-color: #fff;
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
		.pay-price {
			color:#979797;
			font-size: 28upx;
		}
		.total-price {
			color: #ff0000;
			font-weight: bold;
			font-size: 16px;
		}

		.submit-btn {
			width: 120px;
			height: 36px;
			background: #ff0000;
			color: #fff;
		}
	}
</style>